5. Information visualiation and GUI

GUI

Very popular on personal computers

GUI and information visualization

Popular GUI widgets are actually IV tools

Only small improvements to old GUI tools

Everybody loves current tools

Standardized

Considered as "idioms"

Interface "idioms"

Unforgettable operations after using it

Scroll bars, menus, etc.

How to use automatic doors

c.f. "Affordance"

Objects are issuing messages

People use objects naturally

Putting something on table

Pulling door knob

Example: showing folders as windows

Hierarchy visualization

http://gyazo.com/20ca777c5599ec6e88b870d320d8dd9d.png

Cascading menu

Zooming interface for hierarchical data

http://gyazo.com/bc9cac54e0862b35c76a648538d76dd1.png

GUI basics

Tools for visualizing user operations on computers

Zooming / filtering used

"WIMP" GUI

New GUI widgets

Various GUI widgets proposed and forgotten

Slider extentions, scrollbar extentioins

Very little new widgets survive

Scroll bars

Will be extinct on Mac?

XEROX PARC

http://maps.google.co.jp/maps?q=Xerox+Palo+Alto+Research+Center,+Coyote+Hill+Road,+Palo+Alto,+California,+Stati+Uniti&hl=ja&ll=37.414209,-122.157841&spn=0.080989,0.105572&sll=37.401596,-122.147503&sspn=0.002548,0.003299&oq=xerox+palo+alto+research&brcurrent=3,0x0:0x0,0&hq=Xerox+Palo+Alto+Research+Center,+Coyote+Hill+Road,+Palo+Alto,+California,+Stati+Uniti&t=m&z=13 http://gyazo.com/b93fb40af13436b714e1ac3d8f26ba8a.png

Alto (1973)

Developed at PARC

Oldest workstation

Bitmap display

Mouse / Window / Menu

http://gyazo.com/ffe13676111e106b8c819b870cce4601.png

Alto

http://gyazo.com/96bf4fda6bf46b0f862f9d3c68905016.png

http://gyazo.com/ffe13676111e106b8c819b870cce4601.png

Alto restoration

https://www.youtube.com/watch?v=YupOC_6bfMI

Xerox Star

Sold in 1981

http://gyazo.com/79d6aa012b0c679da9a11b02cb3f659e.png

Ethernet

Not TCP/IP-based

JStar

Available in 1982

Japanese version STAR

http://gyazo.com/966466ccdf1c07654c2c9574c8a0b459.png

Andrew (1982)

https://gyazo.com/ec72bb024135e323c53818d6f5aca8c8

Developed at CMU

Tiling windows

Window system, network, etc.

Origin of MIME

X Window System (1984)

MIT

X11 available in 1987

Separating window server and manager

Used everywhere today

Lisa (1983)

Personal GUI computer by Apple

Steve Jobs made it after seeing ALTO

http://gyazo.com/c0596d8b63d9b9b790d3bb953c5291a7.png

Lisa display

http://gyazo.com/03d3fe5a2f2464b9b2448fb83c556ed3.png

Macintosh (1984)

Originally developed by Jef Raskin

Steve Jobs ousted Raskin

http://gyazo.com/5db2d3658020a8fd6712eb783a62b988.png

Jef Raskin

Began Macintosh project at Apple

Ousted by Steve Jobs

http://gyazo.com/d25e4620529487cb42350dfa6c28209f.png

Comic "Steves"

http://hondana.org/%E5%A2%97%E4%BA%95/4091866980 https://gyazo.com/ac8942dccd0316fa42e75e52d25acba4

Jef Raskin

https://gyazo.com/040532621ca461bcf32553d3577a5aa3

Jobs vs Raskin

https://gyazo.com/292c4e313c9b9f8be3f928de43ababf1

Macintosh System 4.2 (Finder version 6)

http://gyazo.com/371dadb8dfee860bef2a1ef88d3d5b83.png

NeXT Computer

Founded in 1985 by Steve Jobs

NeXT Cube

Origin of MacOS

http://gyazo.com/66d94e93c6a0d0153f171b88692e2445.png

NeXTStep

http://gyazo.com/37a3e1d28c4268112b42e760de38f2af.png

Windows95

From 1995

Added GUI skin on MS-DOS

http://gyazo.com/c4395fd01b713415f5b283f3414a0153.png

Interface builder

Interactively lay out GUI widgets

Generating program skeletons

Testing without compilation

Widely available on various GUI programming environments

Interface builder on NeXT computer

http://gyazo.com/26628fafb9d8cddd83ada076705b68fe.png

Interface bulider on Mac

http://gyazo.com/fc72e526450de45e308ef0e211a8525b.png

Various scroll bars

Different behaviors and appearances

Arror key positions

Knob appearance

Behavior after clicking knob

...

History of Mac scroll bar

Smalltalk on ALTO

⇒ Lisa

⇒ Macintosh

⇒ Windows, etc.

Scrollbar on OpenWindows

http://gyazo.com/62bca0ab396035cbfa66dc5cfbc259d9.png

Scrollbar on Motif

http://gyazo.com/5cc506795970aa707c1486853095fae6.png

Scrollbar on X11

http://gyazo.com/0ad8731d98d486609a46e874bff74ed0.png

Scrollbar on Mac

http://gyazo.com/f5d37a70aed1ee82756fede76a85d72e.png

Scrollbar on Windows

http://gyazo.com/90a138227e4be5999fe045a6e565f6d4.png

Scrollbar on NeXTstep

http://gyazo.com/37a3e1d28c4268112b42e760de38f2af.png

Scrollbar on NeXTSTEP

http://gyazo.com/715ad6bc4fffb01c71e012976bfc8c32.png

Various sliders

http://gyazo.com/157c3330135cd06cfcd77b4973fdb7c4.png

Scrollbar extensions

Coarse/fine movement

Showing additional information

Slider on iPhone

Fine movement when finger moves far from the slider

http://gyazo.com/37e4e3bdb61ecd63cd766c2b38d06412.png

https://www.youtube.com/watch?v=WNOC4DXwfBQ

AlphaSlider

Fine control based on position

http://gyazo.com/12900362d657308e1163a8c998edba98.png

Video: AlphaSlider (2:50)

https://s3-ap-northeast-1.amazonaws.com/masui.org/0/7/07b3b2494947579b6044f2e35b3696ca.mp4

FineSlider

Fine control by rubberband

Put a rubberband between mouse cursor and knob

http://gyazo.com/2931288cd1eef1ccf101a4ea5f62b7b2.png

Video: FineSlider

https://www.youtube.com/watch?v=vmdgs5q3YSI

Index navigator

Precise control using FineSlider

http://gyazo.com/a786a5ff4ea959dd1b8091ac29045f54.png

Demo: Index navigator

Popup Vernier

Show 'vernier dial' near scrollbar

http://gyazo.com/8c8cb7abc81c12e3b43095a1dcdf0f4e.png

SmoothSnap

Extension to scrollbar

Small movement for fine control / large movement for coarse control

http://gyazo.com/28cd5ea0a8cbdf382e7cc0da274f0305.png

http://www.pitecan.com/SmoothSnap/rclock.html https://gyazo.com/58296847841d94b436cb6a6ef875b05f

Demo: SmoothSnap

https://gyazo.com/0e7c291011893541ff8111899ae4cabd

LensBar

Zooming + scrollbar

Use background information

FineSlider-based control

Demo: LensBar

http://gyazo.com/9631f1e69576cb1b062d00ab555f8a40.gif

Demo: LensBar

https://gyazo.com/9fec66c040b2d8c5fcb4659805cb943d http://masui.org/i/

http://gyazo.com/69d0a257e3653b5482aed29905f05ddb.png

Data Visualization Slider

Show extra information in the background

http://gyazo.com/8b836503cfb08855e2e1b4d0a1e16d2c.png

Show file sizes and update dates in the background

http://gyazo.com/7b271e637111d3d3a0592a976b89636b.png

Video: Value Bars

https://s3-ap-northeast-1.amazonaws.com/masui.org/7/0/7048b2eb6724bdbf8175cc9d0a67bc1e.mp4

Various menus

Popup menus

Not popular recently

Pulldown menus

Smalltalk menus

http://gyazo.com/3dfac96f6ddc039c46b0dd7c3865f7c2.png

Smalltalk scrollbar

http://gyazo.com/a24033cc2455583c462439eecbbdff05.png

Arrows for scroll

http://gyazo.com/fe9c87ee5ec6277d288bb9f721ceff0b.png

Scroll bar on Lisa

http://gyazo.com/275a1e9569ce11061ab7006d8bf3a5be.png

Pulldown menus

http://gyazo.com/3ca39857447ef0c22e3decfbd4e568cb.png

Pie menu

Select item based on direction

Combination of directions can be used

http://gyazo.com/7402c898b7a61772e9d79ec976bc47c4.png

Marking menu

Pie menu without showing pie

http://gyazo.com/4eb3dddf2c0a403500b0071405a152f2.png

FaST Slider

marking menu + slider

http://gyazo.com/2f8ebf72512f89e8ccaac2be792425f6.png

T-Cube

Position + direction for text input

https://s3-ap-northeast-1.amazonaws.com/masui.org/3/1/31e82879bb85f639fcf6e1054e66fecb.gif

'Flick' text input

T-cube for Japanese text input

http://gyazo.com/4aace6ebfd64f0d35a39c31f6e14a147.png

Dock on Mac

http://gyazo.com/1fb43053a453f6252bf2a86f7288fd56.png

Selecting menu item by one stroke

http://gyazo.com/bb68c997775ddd88dca9e04688f443b5.png

Possibilities of new GUI tools

People are not interested in inventing new GUI tools

Still there's room for improvements

Recent GUI topics

Small topics

'Flat' design

'Bouncing' scroll

Not essential

Using LensBar for combobox

http://gyazo.com/b69b73da9b8acd49e69cfc84d2ba6758.png

Demo: Using LensBar for combobox

Gear: "Super" navigation

http://gyazo.com/ab4ff7c2d44f4af2bb94fae76589f495.png

https://gyazo.com/279028630f0f0a45284bb38d0e5a8624

Summary

GUI tools are information visualization tools

Should be improved more